$(function () {
    // 确保数据管理器存在
    if (!window.weatherDataManager) {
        console.error('WeatherDataManager 未初始化');
        return;
    }
    // 当前选中的日期（默认为今天）
    let currentDate = new Date().toISOString().split('T')[0];
    // 气象数据缓存
    let weatherDataCache = {};
    // 工具提示元素
    let tooltip = null;
    // 地图实例
    let myChart = null;

    // 初始化工具提示
    function initTooltip() {
        tooltip = $('<div class="weather-info-tooltip" style="display: none;"></div>');
        $('body').append(tooltip);
    }

    // 初始化日期选择器
    function initDatePicker() {
        const dateInput = $('#weatherDate');

        // 如果日期选择器存在，才进行初始化
        if (dateInput.length > 0) {
            // 设置日期范围：2025年5月1日至9月1日
            const minDate = '2025-05-01';
            const maxDate = '2025-09-01';

            // 设置默认值为今天，但如果今天不在范围内则使用范围内的日期
            let defaultDate = new Date().toISOString().split('T')[0];

            // 检查默认日期是否在有效范围内
            if (defaultDate < minDate) {
                defaultDate = minDate; // 如果今天早于5月1日，使用5月1日
            } else if (defaultDate > maxDate) {
                defaultDate = maxDate; // 如果今天晚于9月1日，使用9月1日
            }

            // 设置输入框的属性限制
            dateInput.attr('min', minDate);
            dateInput.attr('max', maxDate);
            dateInput.val(defaultDate);
            currentDate = defaultDate; // 更新当前日期变量

            // 绑定日期变化事件
            dateInput.on('change', function () {
                const selectedDate = $(this).val();
                if (selectedDate) {
                    // 验证日期是否在有效范围内
                    if (selectedDate >= minDate && selectedDate <= maxDate) {
                        currentDate = selectedDate;
                        loadWeatherData(currentDate);
                    } else {
                        // 如果日期不在范围内，重置为当前日期并提示用户
                        alert('请选择2025年5月1日至9月1日之间的日期');
                        dateInput.val(currentDate);
                    }
                }
            });

            console.log('日期选择器初始化完成，范围：' + minDate + ' 至 ' + maxDate);
        } else {
            console.warn('未找到日期选择器元素 #weatherDate');
        }
    }

    // 初始化基础地图（没有数据时的显示）
    function initBaseMap() {
        myChart = echarts.init(document.getElementById('map_1'));

        const baseOption = {
            title: {
                text: `郑州市气象数据 - ${currentDate}`,
                left: 'center',
                textStyle: {
                    color: '#fff',
                    fontSize: 16
                }
            },
            geo: {
                map: 'zhengzhou',
                label: {
                    show: false,
                    position: 'center',
                },
                emphasis: {
                    label: {
                        show: false,
                    }
                },
                roam: false,
                itemStyle: {
                    normal: {
                        areaColor: '#4c60ff',
                        borderColor: '#002097'
                    },
                    emphasis: {
                        areaColor: '#293fff'
                    }
                }
            },
            series: []
        };

        myChart.setOption(baseOption);

        // 窗口大小调整时重绘
        window.addEventListener("resize", function () {
            myChart.resize();
        });

        console.log('基础地图初始化完成');
    }

    // 异步加载地图数据
    $.getJSON('js/zhengzhou.json', function (zhengzhouJson) {
        console.log('地图数据加载成功');
        echarts.registerMap('zhengzhou', zhengzhouJson);

        // 初始化各个组件
        initTooltip();
        initDatePicker();
        initBaseMap();

        // 加载气象数据
        loadWeatherData(currentDate);

    }).fail(function (jqxhr, textStatus, error) {
        console.error('地图数据加载失败:', textStatus, error);
        // 即使地图数据加载失败，也初始化其他组件
        initTooltip();
        initDatePicker();
        initBaseMap();
    });

    // 从后端加载气象数据
    function loadWeatherData(date) {
        console.log('正在加载气象数据:', date);

        // 确保地图实例存在
        if (!myChart) {
            myChart = echarts.getInstanceByDom(document.getElementById('map_1'));
            if (!myChart) {
                myChart = echarts.init(document.getElementById('map_1'));
            }
        }

        // 显示加载状态
        myChart.showLoading();

        // 检查缓存
        if (weatherDataCache[date]) {
            console.log('使用缓存数据');
            updateMap(weatherDataCache[date]);
            myChart.hideLoading();
            return;
        }

        // 从后端API获取数据
        $.ajax({
            url: '/map/weatherData',
            type: 'GET',
            data: {date: date},
            dataType: 'json',
            success: function (response) {
                if (response && response.success) {
                    console.log('API数据加载成功');
                    // 缓存数据
                    weatherDataCache[date] = response.data;
                    updateMap(response.data);
                } else {
                    console.error('数据加载失败:', response ? response.message : '未知错误');
                    // 使用模拟数据作为备用
                    const mockData = generateMockData(date);
                    weatherDataCache[date] = mockData;
                    updateMap(mockData);
                }
                myChart.hideLoading();
            },
            error: function (xhr, status, error) {
                console.error('API请求失败:', error);
                // 使用模拟数据作为备用
                const mockData = generateMockData(date);
                weatherDataCache[date] = mockData;
                updateMap(mockData);
                myChart.hideLoading();
            }
        });
    }

// 使用区域中心坐标
    const districtCoordinates = {
        '中原区': [113.531576, 34.768286],
        '二七区': [113.565422, 34.670936],
        '管城回族区': [113.735313, 34.706453],
        '金水区': [113.696037, 34.795838],
        '上街区': [113.298282, 34.798689],
        '惠济区': [113.61836, 34.888591],
        '中牟县': [114.022521, 34.721976],
        '巩义市': [112.98283, 34.75218],
        '荥阳市': [113.391523, 34.689077],
        '新密市': [113.380616, 34.537846],
        '新郑市': [113.73967, 34.394219],
        '登封市': [113.037768, 34.459939]
    };

    function generateMockData(date) {
        console.log('生成模拟数据');
        const districts = ['中原区', '二七区', '管城回族区', '金水区', '上街区', '惠济区', '中牟县', '巩义市', '荥阳市', '新密市', '新郑市', '登封市'];

        // 天气类型和对应的图片
        const weatherTypes = [
            {type: '晴', image: 'images/sunny.png'},
            {type: '多云', image: 'images/cloudy.png'},
            {type: '阴', image: 'images/overcast.png'},
            {type: '小雨', image: 'images/light_rain.png'},
            {type: '中雨', image: 'images/middle_rain.png'},
            {type: '大雨', image: 'images/heavy_rain.png'},
            {type: '暴雨', image: 'images/rainstorm.png'},
            {type: '雾', image: 'images/fog.png'},
            {type: '霾', image: 'images/haze.png'}
        ];

        // 空气质量等级
        const airQualityLevels = ['差', '一般', '良', '优'];

        return districts.map(district => {
            const baseTemp = 20 + Math.random() * 15;
            const coords = districtCoordinates[district];
            const weather = weatherTypes[Math.floor(Math.random() * weatherTypes.length)];
            const airQuality = airQualityLevels[Math.floor(Math.random() * airQualityLevels.length)];

            if (!coords) {
                console.warn(`未找到区域 ${district} 的坐标`);
                return null;
            }

            return {
                name: district,
                value: [
                    coords[0],  // 经度
                    coords[1],  // 纬度
                    baseTemp
                ],
                detail: {
                    weather: weather.type,
                    weatherImage: weather.image,
                    temperature: baseTemp.toFixed(1) + '°C',
                    sunshine: (4 + Math.random() * 8).toFixed(1) + '小时', // 日照时长
                    airQuality: airQuality,
                    uvIntensity: ['弱', '中等', '强', '很强'][Math.floor(Math.random() * 4)], // 紫外线强度
                    humidity: (40 + Math.random() * 40).toFixed(0) + '%',
                    feelsLike: (baseTemp + (Math.random() * 4 - 2)).toFixed(1) + '°C' // 体感温度
                }
            };
        }).filter(item => item !== null);
    }

    function updateMap(weatherData) {
        console.log('更新地图显示，数据量:', weatherData.length);

        if (!myChart) {
            myChart = echarts.init(document.getElementById('map_1'));
        }

        const option = {
            title: {
                text: `郑州市气象数据 - ${currentDate}`,
                left: 'center',
                textStyle: {
                    color: '#fff',
                    fontSize: 16
                }
            },
            geo: {
                map: 'zhengzhou',
                label: {
                    show: false,
                    position: 'center',
                },
                emphasis: {
                    label: {
                        show: false,
                    }
                },
                roam: false,
                itemStyle: {
                    normal: {
                        areaColor: '#4c60ff',
                        borderColor: '#002097'
                    },
                    emphasis: {
                        areaColor: '#293fff'
                    }
                }
            },
            series: [{
                type: 'scatter',
                coordinateSystem: 'geo', // 使用地理坐标系
                data: weatherData,
                symbolSize: function (val) {
                    const temp = val[2];
                    return Math.max(8, temp * 0.8);
                },
                itemStyle: {
                    color: function (params) {
                        const temp = params.value[2];
                        if (temp >= 30) return '#ef4444';
                        else if (temp >= 20) return '#10b981';
                        else if (temp >= 10) return '#3b82f6';
                        else return '#1e3a8a';
                    }
                },
                label: {
                    show: true,
                    formatter: function (params) {
                        return params.data.name + '\n' + params.data.detail.temperature;
                    },
                    position: 'right',
                    color: '#fff',
                    backgroundColor: 'rgba(0,0,0,0.5)',
                    padding: [2, 4],
                    borderRadius: 3
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: 14,
                        fontWeight: 'bold'
                    }
                }
            }]
        };
        myChart.setOption(option, true); // true表示不合并选项，完全替换

        // 添加点击事件
        myChart.off('click');
        // 添加地图标记点点击事件
        myChart.on('click', function (params) {
            if (params.componentType === 'series') {
                // 如果点击的是数据点，显示提示框
                showWeatherInfo(params.event.event, params.data);

                // 设置当前选中的区域，并通知其他图表更新
                currentSelectedDistrict = params.data.name;
                window.weatherDataManager.setCurrentDistrict(currentSelectedDistrict, currentDate);

                // 阻止事件冒泡，避免立即触发document的点击事件
                params.event.event.stopPropagation();
            }
        });

        console.log('地图更新完成');
    }

// 显示气象信息工具提示
    function showWeatherInfo(event, data) {
        if (!tooltip) {
            initTooltip();
        }

        const tooltipContent = `
    <div class="weather-tooltip-header">
        <h4>${data.name} - ${currentDate}</h4>
    </div>
    <div class="weather-tooltip-content">
        <div class="weather-main-info">
            <div class="weather-icon">
                <img src="${data.detail.weatherImage}" alt="${data.detail.weather}" title="${data.detail.weather}">
                <div class="weather-name">${data.detail.weather}</div>
            </div>
            <div class="temperature">${data.detail.temperature}</div>
        </div>
        <div class="weather-details">
            <div class="weather-info-item">
                <span class="label">日照时长:</span>
                <span class="value">${data.detail.sunshine}</span>
            </div>
            <div class="weather-info-item">
                <span class="label">空气质量:</span>
                <span class="value air-quality-${getAirQualityClass(data.detail.airQuality)}">${data.detail.airQuality}</span>
            </div>
            <div class="weather-info-item">
                <span class="label">紫外线强度:</span>
                <span class="value uv-${getUVClass(data.detail.uvIntensity)}">${data.detail.uvIntensity}</span>
            </div>
            <div class="weather-info-item">
                <span class="label">湿度:</span>
                <span class="value">${data.detail.humidity}</span>
            </div>
            <div class="weather-info-item">
                <span class="label">体感温度:</span>
                <span class="value">${data.detail.feelsLike}</span>
            </div>
        </div>
    </div>
    `;

        tooltip.html(tooltipContent).show();

        // 获取工具提示的尺寸（需要在显示后获取）
        const tooltipWidth = tooltip.outerWidth();
        const tooltipHeight = tooltip.outerHeight();

        // 获取窗口尺寸
        const windowWidth = $(window).width();
        const windowHeight = $(window).height();

        // 鼠标位置
        const mouseX = event.clientX;
        const mouseY = event.clientY;

        // 默认偏移量
        const offset = 15;

        // 计算最佳显示位置
        let targetX = mouseX + offset;
        let targetY = mouseY + offset;

        // 水平方向检测：如果右边空间不够，显示在左边
        if (targetX + tooltipWidth > windowWidth) {
            targetX = mouseX - tooltipWidth - offset;
        }

        // 垂直方向检测：如果下方空间不够，显示在上方
        if (targetY + tooltipHeight > windowHeight) {
            targetY = mouseY - tooltipHeight - offset;
        }

        // 边界检查，确保不会超出屏幕
        targetX = Math.max(5, Math.min(targetX, windowWidth - tooltipWidth - 5));
        targetY = Math.max(5, Math.min(targetY, windowHeight - tooltipHeight - 5));

        tooltip.css({
            left: targetX + 'px',
            top: targetY + 'px'
        });

        // 添加动画效果
        tooltip.hide().fadeIn(200);
        // 为提示框本身添加点击事件，阻止冒泡
        tooltip.off('click').on('click', function (e) {
            e.stopPropagation();
        });
    }

// 获取空气质量CSS类名
    function getAirQualityClass(quality) {
        const classMap = {
            '优': 'excellent',
            '良': 'good',
            '一般': 'moderate',
            '差': 'poor'
        };
        return classMap[quality] || 'moderate';
    }

// 获取紫外线强度CSS类名
    function getUVClass(uv) {
        const classMap = {
            '弱': 'low',
            '中等': 'medium',
            '强': 'high',
            '很强': 'very-high'
        };
        return classMap[uv] || 'medium';
    }

// 隐藏气象信息工具提示
    function hideWeatherInfo() {
        if (tooltip && tooltip.is(':visible')) {
            tooltip.fadeOut(200, function () {
                $(this).hide();
            });
        }
    }

// 修改文档点击事件处理
    $(document).off('click.hideTooltip').on('click.hideTooltip', function (e) {
        // 如果点击的不是提示框且不是地图数据点，则隐藏提示框
        if (!$(e.target).closest('.weather-info-tooltip').length) {
            // 检查是否点击了地图数据点
            const isDataPoint = $(e.target).closest('#map_1').length > 0 &&
                e.target.tagName === 'canvas';

            if (!isDataPoint) {
                hideWeatherInfo();
            }
        }
    });

// 添加ECharts容器的点击事件处理
    $('#map_1').off('click').on('click', function (e) {
        // 这里不需要做特殊处理，因为ECharts的点击事件已经处理了数据点点击
        // 这个事件主要用于捕获非数据点的地图点击
        if (!$(e.target).is('canvas')) {
            hideWeatherInfo();
        }
    });
});